<template>
    <div class="login-container">

        <!-- 登录表单 -->
        <el-form class="login-form"
            :rules="loginRules"
            :model="loginForm"
            ref="logininFormRef">
            <h2 class="title">Vue3聊天室</h2>
            <!-- 用户名 -->
            <el-form-item prop="userName">
                <el-input placeholder="请输入用户名"
                    prefix-icon="User"
                    v-model="loginForm.userName">
                </el-input>
            </el-form-item>
            <!-- 密码框 -->
            <el-form-item prop="password">
                <el-input 
                    placeholder="请输入密码"
                    type="password"
                    prefix-icon="Lock"
                    v-model="loginForm.password">
                </el-input>

            </el-form-item>

            <!-- 登录按钮 -->
             <el-button class="login-btn" type="primary" @click="doLogin">登录</el-button>

             <div class="register-tip">
                没有账号？
                <el-link type="primary" @click="showRegisterDialog = true">立即注册</el-link>
             </div>
        </el-form>

        <!-- 注册对话框 -->
        <el-dialog width="500" title="注册新账号" v-model="showRegisterDialog">
            <el-form label-width="100px" :model="registerForm" :rules="registerRules" ref="registerFormRef">

                <el-form-item label="账号：" prop="userName">
                    <el-input placeholder="请输入账号" v-model="registerForm.userName"/>
                </el-form-item>

                <!-- 密码框 -->
                <el-form-item label="密码：" prop="password">
                    <el-input placeholder="请输入密码"
                        type="password" v-model="registerForm.password"></el-input>
                </el-form-item>

                <el-form-item label="确认密码：" prop="repassword">
                    <el-input placeholder="请再次输入密码"
                        type="password" v-model="registerForm.repassword"></el-input>
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showRegisterDialog = false">取消</el-button>
                 <el-button type="primary" @click="doRegister">注册</el-button>
                </div>
            </template>
    </el-dialog>
        
    </div>
</template>


<script setup lang="ts">
import { reactive } from 'vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'



    // 登录表单数据
    const loginForm = reactive({
        userName: '',
        password: ''
    })

    //登录表单检验
    const loginRules = reactive({
        userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3,  message: '用户名至少4位', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '密码长度要求6-18位', trigger: 'blur' }
        ]
    })


    const showRegisterDialog = ref(false)



    const registerForm = reactive({
        userName: '',
        password: '',
        repassword: '' 
    })


    const registerRules = reactive({
        userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 4,  message: '用户名至少4位', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '密码长度要求6-18位', trigger:'blur'}
        ],
        repassword: [
            { required: true, message: '请再次输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '密码长度要求6-18位', trigger:'blur'},
            { validator: (rule, value, callback) => {
                if (value !== registerForm.password) {
                    callback(new Error('两次输入的密码不一致'))
                } else {
                    callback()
                }
            }, trigger: 'blur'}
        ]
    })


    const logininFormRef = ref(false)
    const registerFormRef = ref(null)


    const doLogin = ()=>{
        logininFormRef.value.validate(async valid => {
            if (valid) {
                ElMessage.success('数据全部效验通过')
            }else {
                ElMessage.error('表单中有数据未通过效验!')
            }
        })
    }

    const doRegister = ()=>{
        registerFormRef.value.validate(async valid => {
            if (valid) {
                ElMessage.success('成功')
            }else {
                ElMessage.error('失败!')
            }
        })
    }



</script>

<style lang="scss" scoped>
    @use '../assets/login.scss'
</style>